<template>
  <div class="MyAccount">
    <div class="me">
      <div class="me-header" v-show="currentManager.name.length !== 0">
        <div class="ico">{{ currentManager.name[0] }}</div>
        <div class="hello">
          你好<span>{{ currentManager.name }}</span>
        </div>
      </div>
      <div class="me-info">
        <table>
          <tbody>
            <tr>
              <th>用户ID:</th>
              <td>#{{ currentManager.uid }}</td>
              <th>权限:</th>
              <td>
                {{
                  typeof currentManager.privilege_level !== 'undefined'
                    ? privilege__[currentManager.privilege_level].role
                    : ''
                }}
              </td>
              <th>状态:</th>
              <td>
                {{
                  typeof currentManager.state !== 'undefined'
                    ? state__[currentManager.state].text
                    : ''
                }}
              </td>
            </tr>
            <tr>
              <th>联系人:</th>
              <td>{{ currentManager.name }}</td>
              <th>绑定会员:</th>
              <td class="bind-vip">
                <span> {{ currentManager.bind_vip.name }}</span
                >&nbsp;
                <span>({{ currentManager.bind_vip.uid }})</span>
              </td>
              <th>QQ:</th>
              <td>无</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="my-vips">
      <el-table
        :data="currentManagerVips.list"
        :border="true"
        height="480"
        empty-text="暂无数据"
      >
        <el-table-column label="头像" align="center">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.img[0]"
              fit="fit"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="用户" prop="name" align="center" />
        <el-table-column label="地址" prop="name" align="center">
          <template #default="scope">
            {{ scope.row.province }} {{ scope.row.city }}
            <div></div>
          </template>
        </el-table-column>
        <el-table-column
          label="成功下单数"
          prop="success_order"
          align="center"
        />

        <el-table-column
          label="交易金额数"
          prop="success_amount"
          align="center"
        />
        <template #append>
          <div class="loading-more flexc"></div>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { privilege__, state__ } from '../../utils'
import { useManager } from '../../composable/useManager'
import {
  ElInput,
  ElTag,
  ElButton,
  ElForm,
  ElFormItem,
  ElImage,
  ElTable,
  ElTableColumn,
  ElLoading,
} from 'element-plus'
export default defineComponent({
  components: {
    ElInput,
    ElTag,
    ElButton,
    ElForm,
    ElFormItem,
    ElImage,
    ElTable,
    ElTableColumn,
  },
  setup() {
    const { currentManager, getManagerVips, currentManagerVips } = useManager()
    // 下线搜索关键字
    const keyword = ref('')
    // 无限滚动列表
    const infiniteScroller = () => {
      let scrollY = 0
      const table = document.querySelector('.el-table__body-wrapper')
      const scroolEvent = async function () {
        scrollY = table.scrollTop
        if (
          Math.floor(this.scrollHeight - this.scrollTop - this.clientHeight) < 1
        ) {
          const loading = ElLoading.service({
            target: '.loading-more',
            customClass: 'loading-more-spin',
          })
          await getManagerVips(
            ++currentManagerVips.value.currentIndex,
            undefined,
            keyword.value,
            currentManagerVips.value.pageSize
          )
          loading.close()
          currentManagerVips.value.over &&
            table.removeEventListener('scroll', scroolEvent)
        }
      }
      table.addEventListener('scroll', scroolEvent)
    }
    onMounted(async () => {
      const loading = ElLoading.service({
        target: '.loading-more',
        customClass: 'loading-more-spin',
      })
      infiniteScroller()
      await getManagerVips(
        currentManagerVips.value.currentIndex,
        undefined,
        keyword.value,
        currentManagerVips.value.pageSize
      )
    })
    return { currentManager, currentManagerVips, privilege__, state__ }
  },
})
</script>

<style lang="scss">
@import '../../assets/styles/_var.scss';
$me-height: 100px;
$ico-size: 60px;
.MyAccount {
  box-sizing: border-box;
  height: 100%;
  padding: $pad-1;
  font-size: 14px;
  overflow: auto;
  .me {
    display: flex;
    height: $me-height;
    background: $gray-3;
    padding: $pad-2;
    align-items: center;
    .me-header {
      display: flex;
      width: 180px;
      .ico {
        flex-shrink: 0;
        height: $ico-size;
        width: $ico-size;
        line-height: $ico-size;
        text-align: center;
        border-radius: 50%;
        background: $blue;
        font-size: 1.8rem;
        font-weight: bold;
        color: $gray-1;
      }
      .hello {
        flex-grow: 1;
        padding: #{$pad-1 0 $pad-1 $pad-2};
        span {
          margin-top: $pad-1;
          display: block;
        }
      }
    }
  }
  .me-info {
    flex-grow: 1;
    height: $ico-size;
    table {
      width: 100%;
      tr {
        & > th {
          padding: 5px 0;
          color: $gray-6;
          font-weight: normal;
        }
      }
      .bind-vip span:nth-child(2) {
        color: $gray-6;
        font-size: 12px;
      }
    }
  }
  .my-vips {
    margin-top: 20px;
    .loading-more {
      height: 30px;
      .loading-more-spin .el-loading-spinner {
        transform: translateY(8px);
        svg {
          height: 25px;
          width: 25px;
        }
      }
      .el-loading-text {
        font-size: 13px;
      }
    }
  }
}
</style>
